<template>
  <div class="homes">
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="v in swiperList" :key="v.id">
          <img :src="v.imgSrc" alt="" />
        </van-swipe-item>
      </van-swipe>
      <div class="search">
        <span @click="$router.push('/citylist')">{{ city }}</span>
        <p><van-icon name="search" /></p>
        <input type="text" placeholder="请输入小区或地址" />
        <i @click="goMap" class="icon iconfont icon-ditu"></i>
      </div>
    </div>
    <div class="nav_link">
      <p @click="goList">
        <i class="icon iconfont icon-shouye1"></i>
        <span>整租</span>
      </p>
      <p @click="$router.push('/home/list')">
        <i class="icon iconfont icon-B"></i>
        <span>合租</span>
      </p>
      <p @click="goMap">
        <i class="icon iconfont icon-ditu"></i>
        <span>地图找房</span>
      </p>
      <p @click="$router.push('/rent/add')">
        <i class="icon iconfont icon-home"></i>
        <span>去出租</span>
      </p>
    </div>
    <div class="zufang">
      <div class="zufang_header">
        <h3>租房小组</h3>
        <span>更多</span>
      </div>
      <div class="zufang_four">
        <dl v-for="v in groupsList" :key="v.id">
          <dt>
            <h3>{{ v.title }}</h3>
            <p>{{ v.desc }}</p>
          </dt>
          <dd>
            <img :src="v.imgSrc" alt="" />
          </dd>
        </dl>
      </div>
    </div>
    <div class="newsList">
      <h3>最新资讯</h3>
      <dl v-for="v in newsList" :key="v.id">
        <dt><img :src="v.imgSrc" alt="" /></dt>
        <dd>
          <h3>{{ v.title }}</h3>
          <p>
            <span>{{ v.from }}</span>
            <span>{{ v.date }}</span>
          </p>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperList: [],
      groupsList: [],
      newsList: [],
      city: "上海",
    };
  },
  methods: {
    getSwiperList() {
      this.$http.get("/home/swiper").then((res) => {
        if (res.data.status !== 200) {
          Notify({
            type: "danger",
            message: res.data.description,
          });
        }
        this.swiperList = res.data.body;
      });
    },
    goList() {
      this.$router.push({
        path: "/home/list",
        query: {
          rentType: true,
          start: 20,
          end: 29,
        },
      });
    },
    getGroups() {
      this.$http
        .get("/home/groups?area=AREA%7C88cff55c-aaa4-e2e0")
        .then((res) => {
          if (res.data.status !== 200) {
            Notify({ type: "danger", message: res.data.description });
          }
          this.groupsList = res.data.body;
        });
    },
    getNewsList() {
      this.$http
        .get("/home/news?area=AREA%7C88cff55c-aaa4-e2e0")
        .then((res) => {
          if (res.data.status !== 200) {
            Notify({ type: "danger", message: res.data.description });
          }
          this.newsList = res.data.body;
        });
    },
    goMap() {
      this.$router.push("/map");
    },
  },
  created() {
    this.getSwiperList();
    this.getGroups();
    this.getNewsList();
    this.city = window.localStorage.getItem("city");
  },
};
</script>

<style scoped>
.newsList {
  width: 100%;
  padding: 5px;
}
.newsList > h3 {
  width: 100%;
  line-height: 40px;
  padding: 0 10px;
}
.newsList dl {
  width: 100%;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  margin: 5px 0;
  border-bottom: 1px solid #e5e5e5;
}
.newsList dl dt {
  width: 150px;
  height: 100px;
  flex-shrink: 0;
  padding: 5px;
}
.newsList dl dt img {
  width: 100%;
  height: 100%;
}
.newsList dl dd {
  font-size: 14px;
}
.newsList dl dd p {
  margin-top: 30px;
  display: flex;
  color: #9c9fa1;
  justify-content: space-between;
}
.zufang {
  width: 100%;
  background: #f6f5f6;
}
.zufang_header {
  width: 100%;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}
.homes {
  width: 100%;
  overflow-y: scroll;
}
.banner {
  width: 100%;
  height: 100%;
  position: relative;
}
.search {
  width: 85%;
  height: 40px;
  position: absolute;
  top: 35px;
  left: 40px;
  z-index: 999;
  display: flex;
  text-align: center;
  line-height: 22px;
  background: #fff;
  padding: 8px;
  border-radius: 5px;
}
.search > i {
  font-size: 22px;
}
.search p i {
  margin-top: 5px;
}
.search span {
  padding: 0px 5px;
  margin-right: 10px;
  border-right: 1px solid #888999;
}
.search input {
  border: 0;
  outline: none;
  flex: 1;
  margin-left: 5px;
}
.my-swipe {
  width: 100%;
  height: 200px;
}
.van-swipe-item {
  width: 100%;
  height: 100%;
}
.van-swipe-item img {
  width: 100%;
  height: 100%;
}
.nav_link {
  padding: 10px 0;
  width: 100%;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.nav_link p {
  text-align: center;
  font-size: 14px;
}
.nav_link p i {
  width: 50px;
  height: 50px;
  background: #f6f5f6;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  display: block;
  font-size: 22px;
  color: rgb(26, 200, 26);
}
.zufang_four {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 10px;
  margin: 5px 0;
}
.zufang_four dl {
  background: #fff;
  width: 47%;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  margin: 5px 0;
}
.zufang_four dl dt {
  font-size: 14px;
  line-height: 20px;
}
.zufang_four dl dd {
  width: 50px;
  height: 50px;
}
.zufang_four dl dd img {
  width: 100%;
  height: 100%;
}
</style>